<template>
	<view>
		<pageHeader  @back='back' :leftImgBack='false' :fixed='true' :border='true'>
			<image src="/static/svg/cha.svg" slot="left" class="header_back" mode=""></image>
			<text>{{count}}条回复</text>
		</pageHeader>
		<view class="content">
			<view class="body">
				<view class="report" @tap="toReport">
					<image src="/static/svg/jubao.svg" mode=""></image>
					<text>举报</text>
				</view>
				<view class="head">
					<image :src="message.userImage"></image>
				</view>
				<view class="body_content">
					<text class="name">{{message.userName}}</text>
					<text class="comment">{{message.content}}</text>
					<view class="message" >
						<view class="time">
							<text>{{message.addTime}}</text>
						</view>
						<text class="dele" v-if="message.deleteState==0" @tap.stop="toDele" :data-answerid='message.answerId' :data-commentid='message.commentId'>删除</text>
						<view class="assist" @tap.stop="toPraise" :data-commentid='message.commentId' :data-state='message.state' :data-zan='message.zan'>
							<image :src="message.zan==0?praised:praise" mode=""></image>
							<text :class="{isDoed:message.zan==0}">{{message.zanNumber>0?message.zanNumber:'点赞'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="replys" v-if="replyList.length>0">
			<view class="replysTitle">
				<text>全部回复</text>
			</view>
			<detailComment :isNeedReply='false' v-for="(item,index) in replyList" :key='index' :message='item' @praise='toRreplyPraise' @dele='getMessage' @reply='toRreplyRreply' :index='index'/>
		</view>
		<productFooter :onlyShare='true' :isInput="isInput" @submit='toRreply'/>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import productFooter from "@/components/footer/productFooter.vue"
	import pageHeader from "@/components/header/header.vue"
	import detailComment from "@/components/comment/detailComment.vue"
	export default {
		components: {pageHeader,detailComment,productFooter},
		data() {
			return {
				commentId:"",
				state:"",
				isInput:false,
				message:{},
				count:0,
				replyList:[],
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
			};
		},
		onLoad(e){
			this.commentId=e.commentId
			this.state=e.state
			if(e.isInput){
				this.isInput=true
			}
			this.getMessage()
		},
		methods: {
			async getMessage(){
				let data={}
				data.commentId=this.commentId
				data.state=this.state
				data.userId=localStorage.getItem("userId")
				let res=await urls.allReply(data)
				this.message=res.data.commentNew
				this.count=res.data.count
				this.replyList=res.data.comment
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toReport(){
				uni.navigateTo({
					url: '/pages/homeDesign/Report?id='+this.message.commentId
				})
			},
			async toPraise(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.commentId=e.currentTarget.dataset.commentid
				data.userId=localStorage.getItem("userId")
				data.state=e.currentTarget.dataset.state
				if(e.currentTarget.dataset.zan!=0){
					let res=await urls.commentReplyFabulous(data)
					if(res.code==0){
						this.message.zan="0"
						this.message.zanNumber+=1
					}
				}else{
					let res=await urls.reduceCommentZan(data)
					if(res.code==0){
						this.message.zan="1"
						this.message.zanNumber-=1
					}
				}
			},
			toDele(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.showModal({
					content: '是否删除这条评论？',
					success:async res=> {
						if (res.confirm) {
							let data={}
							data.designId=e.currentTarget.dataset.answerid
							data.commentId=e.currentTarget.dataset.commentid
							data.userId=localStorage.getItem("userId")
							let res1=await urls.deleteComment(data)
							if(res1.code==0){
								uni.navigateBack({
									delta: 1
								})
							}
						}
					},
				})
			},
			async toRreply(value){
				let data={}
				data.commentId=this.message.commentId
				data.userId=localStorage.getItem("userId")
				data.replyuserId=this.message.userId
				data.content=value
				data.state=this.state
				data.pid=0
				let res=await urls.addCommentReply(data)
				if(res.code==0){
					this.getMessage()
				}
			},
			async toRreplyRreply(value,index){
				let data={}
				data.commentId=this.message.commentId
				data.userId=localStorage.getItem("userId")
				data.replyuserId=this.replyList[index].userId
				data.content=value
				data.state=this.state
				data.pid=this.replyList[index].replyId
				let res=await urls.addCommentReply(data)
				if(res.code==0){
					this.getMessage()
				}
			},
			toRreplyPraise(index,isAlready){
				if(!isAlready){
					this.replyList[index].zan="1"
					this.replyList[index].zanNumber-=1
				}else{
					this.replyList[index].zan="0"
					this.replyList[index].zanNumber+=1
				}
			}
		},
	}
</script>

<style lang="scss">
.header_back{
	height: 44rpx;
	width: 44rpx;
}
.top_padding{
	height: 1rpx;
	background-color: #EEEEEE;
	position: fixed;
	width: 750rpx;
	top: 85rpx;
	z-index: 999;
}
.body{
	display: flex;
	width: 690rpx;
	padding:30rpx 0 40rpx;
	position: relative;
	.report{
		position: absolute;
		top:30rpx ;
		right: 30rpx;
		height: 50rpx;
		width: 154rpx;
		border-radius: 24rpx;
		border: 1rpx solid #C84739;
		display: flex;
		align-items: center;
		image{
			height: 42rpx;
			width: 42rpx;
			margin-left: 20rpx;
		}
		text{
			font-size: 26rpx;
			color:#C84739 ;
			letter-spacing: 1rpx;
			margin-left: 14rpx;
		}
	}
	.head{
		width: 72rpx;
		image{
			display: block;
			height: 72rpx;
			width: 72rpx;
			border-radius: 50%;
		}
		
	}
	.body_content{
		width: 597rpx;
		margin-left: 20rpx;
		.name{
			display: block;
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
		.comment{
			display: block;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #666666;
			letter-spacing: 1rpx;
			margin: 20rpx 0 32rpx;
		}
		.message{
			width:100% ;
			display: flex;
			align-items: center;
			position: relative;
			.time{
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 1rpx;
				text{
					margin-left: 20rpx;
				}
			}
			.dele{
				font-size: 26rpx;
				color: #A66354;
				letter-spacing: 1rpx;
				margin-left: 30rpx;
			}
			.assist{
				position: absolute;
				right: 0;
				display: flex;
				align-items: center;
				image{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 24rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
				.isDoed{
					color: #B3392B;
				}
			}
		
		}
	}
}
.time>text:first-of-type{
	margin-left:0!important ;
}
.content{
	padding:0 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}
.replys{
	padding: 30rpx 30rpx 128rpx;
	.replysTitle{
		font-size: 30rpx;
		color:#333333 ;
		font-weight: bold;
		line-height: 30rppx;
	}
}
</style>
